<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>面单上传</title>
  <link rel="stylesheet" href="{{ asset('css/weui.min.css') }}"/>
  <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css">
  <link rel="stylesheet" href="{{ asset('css/example.css') }}">
  <script src="{{ asset('js/zepto.min.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/weui.min.js') }}"></script>
</head>
<body>
<div class="page uploader js_show">
  @include('shared.errors')
  @include('shared.messages')
  <div class="page__hd">
    <h1 class="page__title">面单上传</h1>
    <p class="page__desc">使用说明：点击<span class="link">+号</span>选择图片，可以拍照或者从相册中选择，确认后点击上传按钮即可。</p>
  </div>
  <div class="page__bd">
    <div class="weui-gallery" id="gallery" style="opacity: 0; display: none;">
      <span class="weui-gallery__img" id="galleryImg"
            style="background-image:url(blob:https://weui.io/33270706-80c9-4f44-830a-4e979c3bd7fb)"></span>
      <div class="weui-gallery__opr">
        <a href="javascript:" class="weui-gallery__del">
          <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a>
      </div>
    </div>
    <div class="weui-cells weui-cells_form">
      <form action="{{ url('/scan/process') }}" method="post" enctype="multipart/form-data">
        {{ csrf_field() }}
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <p class="weui-uploader__title">图片上传</p>
              </div>
              <div class="weui-uploader__bd">
                <ul class="weui-uploader__files" id="uploaderFiles">
                </ul>
                <div class="weui-uploader__input-box">
                  <input name="result_file[]" id="uploaderInput" capture="camcorder" class="weui-uploader__input" type="file" accept="image/*" multiple>
                </div>
              </div>
            </div>
          </div>
          <input type="hidden" id="img_str">
        </div>
        <div class="weui-btn-area">
          <button class="weui-btn weui-btn_primary">上传</button>
        </div>
      </form>
    </div>
  </div>
  <div class="weui-footer weui-footer_fixed-bottom">
    <p class="weui-footer__text">Copyright © 2014-2017 科尔乐</p>
  </div>
</div>
<script type="text/javascript" class="uploader js_show">
  $(function () {
    var tmpl = '<li id="#imgname#_li" class="weui-uploader__file" style="background-image:url(#url#)"></li>',
      $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
      $uploaderInput = $("#uploaderInput"),
      $uploaderFiles = $("#uploaderFiles");

    $uploaderInput.live("change", function (e) {
      var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
      for (var i = 0, len = files.length; i < len; ++i) {
        var file = files[i];
        if (url) {
          src = url.createObjectURL(file);
        } else {
          src = e.target.result;
        }
        var src_split = src.split('/');
        $uploaderFiles.append($(tmpl.replace('#url#', src).replace('#imgname#', src_split[src_split.length - 1])));
        if ($("#img_str").val() == '' || $("#img_str").val() == null) {
          $("#img_str").val("'" + src_split[src_split.length - 1] + "'");
        } else {
          $("#img_str").val($("#img_str").val() + ",'" + src_split[src_split.length - 1] + "'");
        }
        $(this).after('<input id="uploaderInput" capture="camcorder"  name="result_file[]"  class="weui-uploader__input" type="file"   accept="image/*" multiple/>');
        $(this).hide();
        $(this).attr({id: "" + src_split[src_split.length - 1] + "_input"});
//        $uploaderFiles.append($(tmpl.replace('#url#', src)));
      }
    });
    $uploaderFiles.on("click", "li", function () {
      $galleryImg.attr("style", this.getAttribute("style"));
      $gallery.fadeIn(100);
    });
    $gallery.on("click", function () {
      $gallery.fadeOut(100);
    });
    $(".weui-gallery__del").click(function () {
      var imgback = $(this).parent("div").prev().attr("style");
      var imgback_array = imgback.split(')');
      imgback_array = imgback_array[0].split('/');
      $("#" + imgback_array[imgback_array.length - 1] + "_input").remove();
      $("#" + imgback_array[imgback_array.length - 1] + "_li").remove();

      var img_str = $("#img_str").val();
      console.log(img_str);
      img_str = img_str.split(',');
      var img_str_new = '';
      for (var i = 0; i < img_str.length; i++) {
        if (img_str[i] != "'" + imgback_array[imgback_array.length - 1] + "'") {
          if (img_str_new == '') {
            img_str_new = img_str[i];
          } else {
            img_str_new = img_str_new + "," + img_str[i];
          }
        }
      }
      $("#img_str").val(img_str_new);
    });
  });
</script>
</body>
</html>
